<template>
  <div class="resource">
    <div class="resource-wrapper">
      <div class="left">
        <ul>
          <li class="first" @click="gotoIntroPage()" :class="navIndex === -1 ? 'active': ''">资源板块简介</li>
          <li
            v-for="(data,index) in navData"
            :class="navIndex === index ? 'active': ''"
            :key="data._id"
            @click="gotoIdPage(index,data.label)"
          >
            <div class="list-wrapper">
              <p>{{data.label}}</p>
              <div class="position">
                <p>{{data.updated | setDate}}</p>
                <p>{{data.userName}}</p>
              </div>
            </div>
            <div
              class="right"
              :style="{top: topNumber + 'px'}"
              v-show="index === navIndex && data.class.length"
            >
              <ul @click="toPositionUl()">
                <li v-for="(child,index) in data.class" :key="child.id" @click="toPosition(index)">
                  <button>{{child}}</button>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      <div class="middle">
        <router-view ref="view" @_gotoIdPage="gotoIdPage"></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "Vuex";
export default {
  name: "resource",
  data() {
    return {
      navData: "",
      navIndex: -1,
      topNumber: 87,
      scrollNumber: 0
    };
  },
  watch: {
    scrollNumber() {
      if (this.scrollNumber < 87) {
        this.topNumber = 87 - this.scrollNumber;
      } else {
        this.topNumber = 0;
      }
    }
  },
  mounted() {
    window.onscroll = () => {
      this.scrollNumber = document.documentElement.scrollTop;
    };
    this.initMethods();
  },
  activated() {
    let id = this.$route.params.id;
    if (!id) {
      this.navIndex = -1;
    }
  },
  methods: {
    toPositionUl() {
      event.stopPropagation();
    },
    toPosition(index) {
      event.stopPropagation();
      let height = document.documentElement.offsetHeight;
      let clientHeight = document.documentElement.clientHeight;
      let scrollTop = document.documentElement.scrollTop;
      let temp = 5;
      let top = 0;
      if (index === 0) {
        temp = (scrollTop - top) / 10;
        let time = setInterval(() => {
          document.documentElement.scrollTop =
            document.documentElement.scrollTop - temp;
          if (document.documentElement.scrollTop <= top) {
            clearInterval(time);
          }
        }, 0);
      } else {
        for (let i = 0; i < index; i++) {
          top += this.$refs.view.$refs.pbs[i].offsetHeight;
        }

        if (scrollTop > top) {
          temp = Math.ceil((scrollTop - top) / 10);
          let time = setInterval(() => {
            document.documentElement.scrollTop =
              document.documentElement.scrollTop - temp;
            if (document.documentElement.scrollTop <= top) {
              clearInterval(time);
            }
          }, 20);
        } else if (scrollTop < top) {
          temp = Math.ceil((top - scrollTop) / 10);
          let time = setInterval(() => {
            document.documentElement.scrollTop =
              document.documentElement.scrollTop + temp;
            if (
              document.documentElement.scrollTop >= top ||
              document.documentElement.scrollTop >= height - clientHeight
            ) {
              clearInterval(time);
            }
          }, 20);
        } else {
          return;
        }
      }
    },
    gotoIntroPage() {
      this.navIndex = -1;
      this.$router.push("/resource/intro");
    },
    gotoIdPage(index, label) {
      this.navIndex = index;
      this.$router.push("/resource/download/" + label);
    },
    initMethods() {
      this.getNavData()
        .then(res => {
          if (res.data.ok === 1) {
            this.navData = res.data.data;
            let id = this.$route.params.id;
            // 控制当前如果是动态路由，则进入动态路由的对应导航index
            if (id) {
              let navData = this.navData;
              for (let i = 0; i < navData.length; i++) {
                if (navData[i].label === id) {
                  this.navIndex = i;
                  break;
                }
              }
            } else {
              this.navIndex = -1;
            }
          } else {
            console.log(res.data.data);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    ...mapActions("user", ["getNavData"])
  }
};
</script>

<style lang="sass" scoped>
@import '@/assets/default.sass'
.resource
  width: 100%
  min-height: 93vh 
  .resource-wrapper
    width: 1280px
    margin: 0 auto
    padding: 1% 0
    @include flex(flex-start,flex-start)
    .left
      flex: 0 0 12%
      width: 12%   
      padding: 1.5% 
      background-color: #fff 
      >ul
        width: 100%
        .first
          width: 100%
          height: 30px
          line-height: 30px
          background-color: #eee
          text-align: center
          cursor: pointer
        .active
          border: 1px solid #eb2001
        >li
          width: 100% 
          margin-bottom: 10px
          overflow: hidden
          .list-wrapper
            width: 100%
            height: 0
            padding-top: 100%
            position: relative
            cursor: pointer
            >p
              width: 100%
              position: absolute
              left: 0
              top: 0
              bottom: 0
              right: 0
              background-color: #eee
              padding: 5%
              text-align: center
              font-size: 18px
              @include flex(center,center)
            .position
              position: absolute
              width: 100%
              height: 0px
              bottom: 0
              transition: height .2s
              background-color: rgba(0,0,0,.3)
              text-align: center
              >p
                line-height: 20px
                width: 100%
                height: 20px                
                color: #fff
                font-size: 12px
                @include text-overflow()
            &:hover
              .position
                height: 40px
                transition: height .3s
      .right
        position: fixed
        margin: auto 
        margin-left: 1160px 
        >ul
          width: 100px
          padding: 10px 0    
          background-color: #fff
          box-shadow: 3px 3px 5px rgba(0,0,0,.12)
          >li
            width: 100%
            height: 30px
            line-height: 30px
            text-align: center
            @include text-overflow()
            >button
              width: 100%
              height: 100%
            &:hover
              color: #eb2001
    .middle
      flex: 0 0 78%
      width: 78%
      margin-left: 1%
</style>